﻿/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({   //selector 为jquery选择器
*  msg:'your messages!',    //你的提示消息  必填
*  side:1,  //提示窗显示位置  1，2，3，4 分别代表 上右下左 默认为1（上） 可选
*  color:'#FFF', //提示文字色 默认为白色 可选
*  bg:'#F00',//提示窗背景色 默认为红色 可选
*  time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
*  x:0,//横向偏移  正数向右偏移 负数向左偏移 默认为0 可选
*  y:0,//纵向偏移  正数向下偏移 负数向上偏移 默认为0 可选
* })
*
*
*/
(function ($) {
    $.fn.tips = function (options) {
        var defaults = {
            side: 1,
            msg: '',
            color: '#FFF',
            bg: '#F00',
            time: 2,
            x: 0,
            y: 0
        }
        var options = $.extend(defaults, options);
        if (!options.msg || isNaN(options.side)) {
            throw new Error('params error');
        }
        if (!$('#jquery_tips_style').length) {
            var style = '<style id="jquery_tips_style" type="text/css">';
            style += '.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
            style += '.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
            style += '.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
            style += '.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
            style += '.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
            style += '.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
            style += '.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px; overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
            style += '</style>';
            $(document.body).append(style);
        }
        this.each(function () {
            var element = $(this);
            var element_top = element.offset().top, element_left = element.offset().left, element_height = element.outerHeight(), element_width = element.outerWidth();
            options.side = options.side < 1 ? 1 : options.side > 4 ? 4 : Math.round(options.side);
            var sideName = options.side == 1 ? 'top' : options.side == 2 ? 'right' : options.side == 3 ? 'bottom' : options.side == 4 ? 'left' : 'top';
            var tips = $('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_' + sideName + '"></i><div class="jq_tips_info">' + options.msg + '</div></div>').appendTo(document.body);
            tips.find('.jq_tips_arrow').css('border-' + sideName, '10px solid ' + options.bg);
            tips.find('.jq_tips_info').css({
                color: options.color,
                backgroundColor: options.bg
            });
            switch (options.side) {
                case 1:
                    tips.css({
                        top: element_top - tips.outerHeight() + options.x,
                        left: element_left - 10 + options.y
                    });
                    break;
                case 2:
                    tips.css({
                        top: element_top - 20 + options.x,
                        left: element_left + element_width + options.y
                    });
                    break;
                case 3:
                    tips.css({
                        top: element_top + element_height + options.x,
                        left: element_left - 10 + options.y
                    });
                    break;
                case 4:
                    tips.css({
                        top: element_top - 20 + options.x,
                        left: element_left - tips.outerWidth() + options.y
                    });
                    break;
                default:
            }
            var closeTime;
            tips.fadeIn('fast').click(function () {
                clearTimeout(closeTime);
                tips.fadeOut('fast', function () {
                    tips.remove();
                })
            })
            if (options.time) {
                closeTime = setTimeout(function () {
                    tips.click();
                }, options.time * 1000);
                tips.hover(function () {
                    clearTimeout(closeTime);
                }, function () {
                    closeTime = setTimeout(function () {
                        tips.click();
                    }, options.time * 1000);
                })
            }
        });
        return this;
    };
})(jQuery);